<template>
	<view class="bottom-nav">
		<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="handleClick(index)">
			<!-- 显示图标 -->
			<image :src="item.icon || defaultIcon" class="nav-icon" />
			<text class="nav-text" :class="{ 'active-text': index === activeIndex }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			navList: {
				type: Array,
				required: true,
				default: () => []
			},
			activeIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				defaultIcon: '/static/icons/default.png' // 默认图标
			}
		},
		methods: {
			handleClick(index) {
				// 触发自定义事件，将点击的项的索引传递给父组件
				this.$emit('nav-change', index);
			}
		}
	}
</script>

<style>
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx; /* 增加高度以适应图标和文字 */
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
		z-index: 100; /* 确保菜单在最上层 */
		padding-bottom: env(safe-area-inset-bottom); /* 适配底部安全区域 */
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 根据需要调整每个导航项的宽度 */
		flex: 1;
		padding: 10rpx 0;
	}

	.nav-icon {
		width: 50rpx; /* 增加图标大小 */
		height: 50rpx;
		margin-bottom: 8rpx;
	}

	.nav-text {
		font-size: 26rpx;
		color: #666;
	}
	
	.active-text {
		color: #007aff; /* 选中状态的颜色 */
		font-weight: bold;
	}
</style> 